<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">商品列表</block>
		</cu-custom>
		<view class="nft-content" style="padding-top: 20px;">
		
			<view class="nft-block" style="background-color: unset;">				
				<view class="flex flex-wrap">
					<view class="nft-block-box"  v-for="(item,index) in list" :key="index" >
						<view>
							<image :src="item.img_url" style="height: 140px;margin-top: 20rpx;"></image>
							<view style="color: #9B9999;font-size: 14px;margin-top: 5px;">
								{{item.name}}
							</view>
							<view class="flex" style="margin: 5px 0px;">
								<view style="float: left;color: #000;font-size: 18px;margin-top: 0px;">
									{{Number(item.price)}}积分
								</view>
								<view style="float: right;" @tap="showModal(item)">
									<view class="nft-block-button2">兑换</view>
								</view>
								<view class="clear"></view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		

		
		
		<view class="cu-modal" :class="modalName=='duihuan'?'show':''" style="z-index: 2;">
					<view class="cu-dialog" style="background-color:#FFF;height:175px;color:#00A99D">
						<view style="width:90%;margin:0 auto;">
							<view class="open-block">
								<view style="font-size:16px;margin-top:10px;color:#000;margin-bottom: 15px;">提示</view>
								<view  class="padding" style="color: #00A99D;font-size:16px;">您是否确认兑换该产品？</view>
							</view>
							<view class="flex flex-wrap justify-between align-center" style="width:200px;margin:24px auto;margin-bottom: 15px;">
								<button  class="cu-btn out-btn" style="background-color:#fff;border: 1px solid #00A99D;" @click="hideModal()">取消</button>
								<button class="cu-btn confirm-btn" style="background-color:#00A99D;" @click="invoicePage()">确认</button>
							</view>
						</view>
					</view>
				</view>
		
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				goodId:'',
				list:[],
				modalName:null,
				pid:0,
			}
		},
		onLoad() {
			
		},
		onShow() {
			_self = this;
			this.getData();
		},
		onHide() {
			this.modalName = null
		},
		methods: {
	async	getData(){
				let [err,res] = await this.$http.get('productList',{
					type:1
				},{
					token:true,
					checkToken:true ,
				});
				// 失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				this.list = res.data.data
			},
			invoicePage(){
				//当前页面路径
				uni.navigateTo({
					url:'/pages/center/address/list?id='+this.pid,
				})
			},
			showModal(item){
				this.modalName='duihuan'
				this.pid = item.id
			},
			hideModal(){
				this.modalName = null
			}
		}
	}
</script>

<style>
	.nft-block {
		width: 100%;
		background-color: black;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		overflow: auto;
	}

	.nft-block-title {
		width: 120rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		margin: 0 auto;
		background-color: red;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.nft-block-box {
		width: 45%;
		background-color: #FFFFFF;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 20rpx;
		margin-left: 10px;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.nft-block-button1 {
		width: 110rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		margin: 0 auto;
		background-color: green;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #caa771;
		font-size: 20rpx;
	}
	.nft-block-button2 {
		width: 120rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
		margin: 0px 5px;
		background-color: #00A99D;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10px;
	}
	.nft-block-button3 {
		width: 110rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		margin: 0 auto;
		background-color: black;
		background-size: 100% 100%;
		background-repeat: no-repeat;
			color: #caa771;
		font-size: 20rpx;
	}
	
	.out-btn{
		border-radius: 20px;
		width: 40%;color: #B0B0B0;
	}
	.confirm-btn{
		background-color:#00A99D;border-radius: 20px;
		width: 40%;color: #fff;
	}

	.clear {
		clear: both;
	}
	.margin-right-xxs {
	 margin-right: 20upx;
	}

</style>
